<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor)">
    <!-- playground-fold-end -->
    
    <ui5-label show-colon>Form Layout</ui5-label><ui5-text>S2 M2 L2 XL2</ui5-text></br>
    <ui5-label show-colon>Label Span</ui5-label><ui5-text>S12 M12 L12 XL12</ui5-text></br>
    <ui5-label show-colon>Page Size</ui5-label><ui5-text id="txtLayout">М</ui5-text>
    <ui5-slider id="slider" value="53"></ui5-slider>

    <div id="container" style="max-width: 1500px; width: 800px; overflow-x: auto">
        <ui5-form header-text="Personal Data" layout="S2 M2 L2 XL2" label-span="S12 M12 L12 XL12">
            <ui5-form-item column-span="2">
                <ui5-label required for="nameInp" slot="labelContent">Name:</ui5-label>
                <ui5-input id="nameInp"></ui5-input>
            </ui5-form-item>

            <ui5-form-item>
                <ui5-label for="addressInp" slot="labelContent">Address:</ui5-label>
                <ui5-input id="addressInp"></ui5-input>
            </ui5-form-item>

            <ui5-form-item>
                <ui5-label required for="countryInp" slot="labelContent">Country:</ui5-label>
                <ui5-select id="countryInp">
                    <ui5-option selected >Argentina</ui5-option>
                    <ui5-option>Bulgaria</ui5-option>
                    <ui5-option>Denmark</ui5-option>
                </ui5-select>
            </ui5-form-item>

            <ui5-form-item column-span="2">
                <ui5-label for="additionalCommentsInp" slot="labelContent">Additional Comments:</ui5-label>
                <ui5-textarea id="additionalCommentsInp" placeholder="Write your message here" show-exceeded-text  maxlength="10"></ui5-textarea>
            </ui5-form-item>
        </ui5-form>
    </div>

    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
